import { useHistory } from 'react-router-dom';
import { Layout, Row, Col, Dropdown, Menu } from 'antd';
import { DownOutlined, LogoutOutlined } from '@ant-design/icons';

const { Header } = Layout;

export default ({ profile }) => {
    const history = useHistory();

    const menu = (
        <Menu>
            <Menu.Item icon={<LogoutOutlined />}>
                <a href="#" onClick={() => handleLogout()}>
                    退出登录
                </a>
            </Menu.Item>
        </Menu>
    );

    const handleLogout = () => {
        // 清空登录态
        window.sessionStorage.clear();
        // 跳转到登录页面
        history.push('/login');
    };

    return (
        <Header>
            <Row justify="space-between">
                <Col>Logo</Col>
                <Col>
                    <Dropdown overlay={menu}>
                        <a
                            className="ant-dropdown-link"
                            onClick={(e) => e.preventDefault()}
                        >
                            欢迎，{profile.nickname}{' '}
                            <span style={{ color: 'orange' }}>
                                {profile.role_name}
                            </span>{' '}
                            登录 <DownOutlined />
                        </a>
                    </Dropdown>
                </Col>
            </Row>
        </Header>
    );
};
